<template>
	<div id="FILL"  :style="{minHeight: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="填写订单" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>
		<!-- 内容 -->
		<!-- 个人信息 -->
		<div class="message">
			<div class="blue"></div>
			<img src="../assets/images/个人信息/个人信息_11.png">
			<router-link to='/Address'>
				<div class="message_text">
					<div class="message_text_one">李先生 13423433424</div>
					<div class="message_text_two">广东省佛山市禅城区印象购物中心5号楼1902室</div>
				</div>
			</router-link>
		</div>
		<!-- 提醒 -->
		<div class="remind"> 
			<div class="remind_one">

			</div>
			<div class="remind_two">
				您定制的商品预计于2016年04月15日寄出。
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="product">
			<!-- 共几件 -->
			<div class="product_one">
				<div class="product_one_img">
					<img src="../assets/images/h5页面1/h5页面_2_04.png">
					<img src="../assets/images/h5页面1/h5页面_2_04.png">
					<img src="../assets/images/h5页面1/h5页面_2_04.png">
				</div>
				<div class="product_one_two">
					...
				</div>
				<div class="product_one_three">
					<div>共六件</div>
					<img src="../assets/images/个人信息/个人信息(绑定手机）_03.png">
				</div>
			</div>
			<!-- 尺寸 -->
			<router-link to='/NotSize'>
				<div class="product_two">
					<div>测量尺寸</div>
					<img src="../assets/images/个人信息/个人信息(绑定手机）_03.png">
				</div>
			</router-link>
			<!-- 支付 -->
			<div class="product_three">
				<div class="product_three_text">支付及配送</div>
				<div class="product_three_t">
					<div class="product_three_text_one">微信支付</div>
					<div class="product_three_text_one">快递</div>
					<div class="product_three_text_two">工作日、双休日与假日均可送货</div>
				</div>
			</div>
			<!-- 优惠卷 -->
			<div class="product_four">
				<div class="product_four_text">
					优惠券折扣
				</div>
				
				<van-switch v-model="checked" inactive-color="grey" />
				
			</div>

		</div>
		<!--留言 -->		
		<div class="leave">
			<div class="left_text">
				备注留言 :
			</div>
			<input type="text">
		</div>
		<!-- 金额 -->
		<div class="sum">
			<div class="sum_">
				<div class="sum_text_one">商品金额</div>
				<div class="sum_text_two">￥{{dolr}}</div>
			</div>
			<div class="sum_">
				<div class="sum_text_one">优惠券抵扣</div>
				<div class="sum_text_two">- ￥ {{jian}}</div>
			</div>
		</div>
		<!-- 结算 -->
		<div class="close">
			<div class="close_left">
				实付款 ： ￥ {{jiesuan}}
			</div>
			<div class="close_right">
				<img src="../assets/images/结算/icon_1.png">
				<div>提交订单</div>
			</div>
		</div>
		
		
	</div>
</template>
<script>
	export default {
		data() {
			return {
				jiesuan:6000.0,
				dolr:2000,
				jian:0,
				active: 2,
				checked: false,
				currHeight: ''
			}
		},
		  methods: {
			onClickLeft() {
			
			this.$router.go(-1)
			},
			onClickRight() {
			
			},
		},
		mounted(){
		    this.currHeight = document.documentElement.clientHeight
		    window.onresize = () => {
		        this.currHeight = document.documentElement.clientHeight
		    }
		}
	};
</script>
<style scoped lang="less">
	#FILL{
		background: #F3F4F6;
		width: 100%;
	}
	.top_{
		width: 100%;
		position: fixed;
		z-index: 999;
	}
	// 内容
	// 个人信息
	.message {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 100px 0px 25px 25px;
		position: relative;
		display: flex;
		justify-content: flex-start;

		.blue {
			position: absolute;
			top: 0;
			left: 0;
			width: 5px;
			height: 100%;
			background: blue;
		}

		img {
			margin-top: 20px;
			height: 38px;
		}

		.message_text {
			margin-left: 20px;

			.message_text_one {
				font-size: 30px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
			}

			.message_text_two {
				font-size: 24px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}
		}
	}

	//提醒
	.remind {
		width: 100%;
		box-sizing: border-box;
		padding: 30px 0px 20px 40px;
		display: flex;
		justify-content: flex-start;

		.remind_one {
			margin-top: 15px;
			margin-right: 30px;
			width: 10px;
			height: 10px;
			background: #FF4242;
			border-radius: 50%;
		}

		.remind_two {
			font-size: 26px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #666666;
		}
	}

	//商品信息
	.product {
		width: 100%;
		background: white;

		// 共几件
		.product_one {
			width: 100%;
			height: 172px;
			box-sizing: border-box;
			padding-left: 20px;
			padding-top: 28px;
			padding-right: 24px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid gray;

			.product_one_img {
				width: 65%;
				display: flex;
				justify-content: flex-start;

				img {
					margin-right: 20px;
					height: 120px;
				}
			}

			.product_one_two {
				width: 25%;
			}

			.product_one_three {
				width: 20%;
				display: flex;
				justify-content: space-between;

				div {
					margin-top: 30px;
					font-size: 24px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #333333;
				}

				img {
					margin-top: 40px;
					height: 28px;
				}
			}
		}

		// 尺寸
		.product_two {
			width: 100%;
			height: 172px;
			box-sizing: border-box;
			padding-left: 20px;
			padding-top: 28px;
			padding-right: 24px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid gray;

			div {
				margin-top: 40px;
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}

			img {
				margin-top: 40px;
				height: 28px;
			}
		}

		// 支付配送
		.product_three {
			width: 100%;
			height: 172px;
			box-sizing: border-box;
			padding-left: 20px;
			padding-top: 20px;
			padding-right: 24px;
			padding-bottom: 20px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid gray;

			.product_three_text {
				margin-top: 40px;
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}

			.product_three_t {
				.product_three_text_one {
					font-size: 24px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #333333;
					text-align: right;
				}

				.product_three_text_two {
					font-size: 24px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #999999;
					text-align: right;
				}
			}
		}

		// 优惠卷
		.product_four{
			width: 100%;
			height: 172px;
			box-sizing: border-box;
			padding-left: 20px;
			padding-top: 60px;
			padding-right: 24px;
			padding-bottom: 20px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid gray;
			.product_four_text{
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}
		}


	}
	// 备注
	.leave{
		width: 100%;
		height: 100px;
		margin-top: 20px;
		background: white;
		display: flex;
		justify-content:space-between;
		.left_text{
			margin-top: 30px;
			margin-left:24px;
			font-size: 26px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #BBBBBB;
		}
		
		input {
			text-align: left;
			margin-left: 10px;
			width: 70%;
			height: 80%;
			border: none;
			margin-top: 1.5%;
		}
	}
	// 金额
	.sum{
		width: 100%;
		height: 126px;
		margin-top: 20px;
		background: white;
		box-sizing: border-box;
		padding:0px 25px  25px 25px;
		.sum_{
			display: flex;
			justify-content: space-between;
			.sum_text_one{
				margin-top: 10px;
				width: 50%;
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}
			.sum_text_two{
				margin-top: 10px;
				font-size: 20px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #234497;
			}
		}
	}
	// 结算
	.close{
		width: 100%;
		height: 126px;
		margin-top: 40px;
		background: white;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		.close_left{
			margin-top: 40px;
			margin-left: 40px;
			font-size: 28px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #234497;
		}
		.close_right{
			width: 211px;
			height: 126px;
			background: #E1E1E1;
			box-sizing: border-box;
			padding-left: 60px;
			border-radius:50px 0  0 50px;
			img{
				margin-top: -15px;
				height: 40%;
			}
			div{
				font-size: 22px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #999999;
				margin-top: -15px;
			}
		}
	}

</style>
